<template>
  <view class="zai-box">
    <image src="/static/login.png" mode="aspectFit" class="zai-logo"></image>
    <view class="zai-title">售后PRO</view>
    <view class="zai-form">
      <input class="zai-input" maxlength="11" v-model="wusername" placeholder="请输入账号" />
      <input class="zai-input" v-model="wpassword" password placeholder="请输入密码" />
      <view class="zai-label">忘记密码？</view>
      <button @click="login" class="zai-btn">立即登录</button>
      <navigator url="/pages/register/register" hover-class="none" class="zai-label">还没有账号？点此注册.</navigator>
    </view>
  </view>
</template>

<script>
  import setting from '../../common/setting.js'
  export default {
    data() {
      return {
        wusername: '',
        wpassword: '',
      }
    },

    methods: {
      login() {
        var that = this
        var re = /^[0-9]*$/
        if (this.wusername.length != 11 || !re.test(this.wusername)) {
          uni.showToast({
            icon: 'none',
            title: '请正确输入11位账号',
          })
          return
        } else if (this.wpassword.length < 6) {
          uni.showToast({
            icon: 'none',
            title: '密码最短为 6 个字符',
          })
          return
        } else {
          uni.request({
            method: 'POST',
            url: setting.url + '/beforelogin',
            data: {
              wpassword: this.wpassword,
              wusername: this.wusername,
            },
            success(res) {
              console.log(res)
              if (res.statusCode == 200) {
                if (res.data.code == -2) {
                  uni.showToast({
                    icon: 'none',
                    title: '该账号未注册',
                  })
                } else if (res.data.code == -1) {
                  uni.showToast({
                    icon: 'none',
                    title: '密码或者账号错误',
                  })
                } else {
                  uni.showToast({
                    icon: 'none',
                    title: '登录成功',
                  })
                  console.log(that.wusername)
                  window.localStorage.setItem('username', that.wusername)
                  uni.reLaunch({
                    url: '../index/index',
                  })
                }
              } else {
                uni.showToast({
                  icon: 'none',
                  title: '网络错误',
                })
              }
            },
          })
        }
      },
    },
  }
</script>

<style>
  .zai-box {
    padding: 0 100upx;
    position: relative;
  }
  .zai-logo {
    width: 100%;
    width: 100%;
    height: 310upx;
  }
  .zai-title {
    position: absolute;
    top: 0;
    line-height: 360upx;
    font-size: 68upx;
    color: #fff;
    text-align: center;
    width: 100%;
    margin-left: -100upx;
  }
  .zai-form {
    margin-top: 300upx;
  }
  .zai-input {
    background: #e2f5fc;
    margin-top: 30upx;
    border-radius: 100upx;
    padding: 20upx 40upx;
    font-size: 36upx;
  }
  .input-placeholder,
  .zai-input {
    color: #94afce;
  }
  .zai-label {
    padding: 60upx 0;
    text-align: center;
    font-size: 30upx;
    color: #a7b6d0;
  }
  .zai-btn {
    background: #ff65a3;
    color: #fff;
    border: 0;
    border-radius: 100upx;
    font-size: 36upx;
  }
  .zai-btn:after {
    border: 0;
  }
  /*按钮点击效果*/
  .zai-btn.button-hover {
    transform: translate(1upx, 1upx);
  }
</style>
